<script lang="ts" setup>
import CountChart from './activity/countChart.vue'
import RankingChart from './activity/rankingChart.vue'
import Multiple from './activity/multipleChart.vue'
import radarChart from './activity/radarChart.vue'
import ScrollList from './activity/scrollList.vue'
import PieChart from './activity/pieChart.vue'
import { fetchGetActivityList } from '@/api/screen/activity'
import { onMounted, reactive, ref } from 'vue'

onMounted(() => {
  getActivityList()
})

let registrationNumber = ref(0) // 报名中数据
let startNumber = ref(0) // 进行中活动
let endNumber = ref(0) // 已结束活动
let totalCount: string[] = [] // 累计参与活动人次
let totalStr = '' // 累计参与活动人次
// 获取所有活动数据
const getActivityList = async () => {
  const res = await fetchGetActivityList()
  res.data.forEach((item: any) => {
    if (Number(item.status) == 1) {
      registrationNumber.value += 1
    } else if (Number(item.status) == 3) {
      startNumber.value += 1
    } else if (Number(item.status) == 4) {
      endNumber.value += 1
    }
    totalStr += item.person
  })
  // 共8位
  totalCount = String(totalStr.split('-').length - res.data.length).split('')

  filterTotal(totalCount)
}

const filterTotal = (val) => {
  if (val.length < 8) {
    totalCount.unshift('0')
    filterTotal(totalCount)
  }
}
</script>

<template>
  <div class="screen-content">
    <!-- 大屏左侧 -->
    <div class="content-left main-content-thin">
      <div class="content-item">
        <div class="item-title">
          <svg-icon icon-class="screen-ring" class="icon" />
          <span>累计参与活动人次</span>
        </div>
        <div class="item-main-box">
          <div class="count-list">
            <div class="count-item" v-for="(item,index) in totalCount" :key="index">{{ item }}</div>
          </div>
        </div>
      </div>
      <div class="content-item">
        <div class="item-title">
          <svg-icon icon-class="screen-ring" class="icon" />
          <span>活动规模排行榜</span>
        </div>
        <div class="item-main-box">
          <RankingChart />
        </div>
      </div>
    </div>

    <!-- 大屏中间 -->
    <div class="content-center ">
      <div class="data-list">
        <div class="card-item">
          <h5>正在报名中</h5>
          <p>{{ registrationNumber }}</p>
          <svg-icon icon-class="screen-card-list-1" class="svg-icon" />
        </div>
        <div class="card-item">
          <h5>进行中活动</h5>
          <p>{{ startNumber }}</p>
          <svg-icon icon-class="screen-card-list-1" class="svg-icon" />
        </div>
        <div class="card-item">
          <h5>已完结活动</h5>
          <p>{{ endNumber }}</p>
          <svg-icon icon-class="screen-card-list-1" class="svg-icon" />
        </div>
      </div>
      <div class="content-item">
        <div class="item-title">
          <svg-icon icon-class="screen-ring" class="icon" />
          <span>活动个数</span>
        </div>
        <div class="item-main-box">
          <Multiple />
        </div>
      </div>
      <div class="content-item">
        <div class="item-title">
          <svg-icon icon-class="screen-ring" class="icon" />
          <span>近期活动</span>
        </div>
        <div class="item-main-box">
          <ScrollList />
        </div>
      </div>
    </div>

    <!-- 大屏右侧 -->
    <div class="content-right main-content-thin">
      <div class="content-item">
        <div class="item-title">
          <svg-icon icon-class="screen-ring" class="icon" />
          <span>平均活动数量</span>
        </div>
        <div class="item-main-box">
          <CountChart />
        </div>
      </div>
      <div class="content-item">
        <div class="item-title">
          <svg-icon icon-class="screen-ring" class="icon" />
          <span>活动概览</span>
        </div>
        <div class="item-main-box">
          <radarChart />
        </div>
      </div>
      <div class="content-item">
        <div class="item-title">
          <svg-icon icon-class="screen-ring" class="icon" />
          <span>活动人员占比</span>
        </div>
        <div class="item-main-box">
          <PieChart />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.screen-content {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 2rem;
  padding: 1rem;
  min-height: 0;

  .content-left {
    display: grid;
    gap: 2rem;
    grid-template-rows: 1fr 4.5fr;
    min-height: 0;

    .content-item {
      .item-main-box {
        .count-list {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 2rem;

          .count-item {
            width: 6.5rem;
            height: 7rem;
            line-height: 7rem;
            text-align: center;
            border: 1px solid #28FFFE;
            color: #28FFFE;
            margin: 0 0.3rem;
            font-size: 3.6rem;
            font-weight: 700;
            box-shadow: inset 0 0 12px 3px rgba(58, 166, 255, 0.6);
            position: relative;

            &::after {
              position: absolute;
              top: -2px;
              right: -2px;
              bottom: -2px;
              left: -2px;
              z-index: -1;
              content: "";
              background: linear-gradient(180deg, #5e9de5 5%, #416ba1 17%, #416ba1 82%, #5e9de5 93%);
              border-radius: 20px;

            }
          }
        }
      }
    }
  }

  .content-center {
    display: grid;
    gap: 2rem;
    grid-template-rows: 0.7fr 1.8fr 1.2fr;
    min-height: 0;

    .data-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;

      .card-item {
        color: #28FFFE;
        font-weight: 700;
        padding: 2rem 2rem;
        display: grid;
        grid-template-rows: 1fr 1fr;
        position: relative;

        .svg-icon {
          position: absolute;
          right: 0px;
          bottom: 0px;
          z-index: 1;

          width: 15rem;
          height: 10rem;
        }

        h5 {
          font-size: 2.4rem;
          font-style: italic;
          font-family: 'Times New Roman', Times, serif;
        }

        p {
          font-size: 3.6rem;
          color: #fff;
          font-style: italic;
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        &:nth-child(1) {
          background-color: #0a99db5e;

          P {
            color: #01FFFA;
          }
        }

        &:nth-child(2) {
          background-color: #4749cf79;

          P {
            color: #FFE46E;
          }
        }

        &:nth-child(3) {
          background-color: #174fc884;
        }
      }
    }
  }

  .content-right {
    display: grid;
    gap: 2rem;
    grid-template-rows: 1fr 1.5fr 1.2fr;
    min-height: 0;
  }


  // 每个有标题且有内容的模块
  .content-item {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 3rem auto;
    border: 0.1rem solid #28FFFE;
    background-color: rgba(9, 13, 24, 0.9);

    .item-title {
      display: flex;
      align-items: center;
      padding: 0 0.5rem;
      color: #28FFFE;
      font-size: 1.8rem;

      span {
        font-weight: 700;
        margin-left: 0.5rem;
      }
    }
  }
}
</style>
